// Dispatching a custom event on user login
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Login with Custom Event</title>
</head>
<body>

<!-- Форма логина -->
<form id="loginForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

<!-- Отображение статуса аутентификации -->
<div id="authStatus">
  <p>Authentication Status: Not logged in</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Пользовательское событие для уведомления о логине пользователя
  const userLoginEvent = new CustomEvent('userLogin', {
    detail: {
      username: null, // Placeholder for the username or user ID
      timestamp: null   // Placeholder for the timestamp of the login
    }
  });

  // Функция для обработки отправки формы (логин)
  function handleLoginFormSubmit(event) {
    event.preventDefault(); // Предотвращение отправки формы по умолчанию

    // Логика заполнителя для аутентификации
    const username = document.getElementById('username').value;
    const timestamp = new Date().toLocaleString();

    // Обновление свойства detail пользовательского события соответствующей информацией
    userLoginEvent.detail.username = username;
    userLoginEvent.detail.timestamp = timestamp;

    // Отправка пользовательского события
    document.dispatchEvent(userLoginEvent);

    // Обновления статуса аутентификации
    const authStatus = document.getElementById('authStatus');
    authStatus.innerHTML = `
      <p>Authentication Status: Logged in as ${username}</p>
      <p>Last login at: ${timestamp}</p>
    `;
  }

  // Добавление слушателя события в форму логина на отправку
  const loginForm = document.getElementById('loginForm');
  loginForm.addEventListener('submit', handleLoginFormSubmit);

});
</script>

</body>
</html>
